angular.module('myApp', [])

.directive('bookList',function(){
    return{
        restrict:'ECAM',
        controller:function($scope,$element,$attrs){
            //这里后执行  2
            //该$scope就是firstController的$scope
            //这里的controller会暴露一个API，利用这个API可以在多个指令之间通过依赖注入进行通信
            console.log($scope)
            console.log($element)
            console.log($attrs)
            $scope.books =[
                {
                    name : 'php'
                },
                {
                    name : 'javascript'
                },
                {
                    name : 'java'
                }
            ]
            this.addBook = function () {
                alert('test');
            //    添加一本书等等
            }
        },
        controllerAs: 'bookListController',
        template:'<ul><li ng-repeat="book in books">{{book.name}}</li></ul>',
        replace:true,
        //可以通过别名依赖注入controller，在多个指令之间进行通信
        link:function (scope,iElement,iAttrs,bookListController) {
            // console.log(scope);
            // console.log(bookListController);
            //addBook后面不能加()，否则页面加载时就会指令执行addBook，点击时会报错
            iElement.on('click',bookListController.addBook)
        }
    }
})

//controller会传入$scope，$scope是连接controller、view、model
//controller主要是控制一些业务逻辑的，
// 比如说要绑定一些事件，设定$scope里面的一些参数
.controller('firstController',[
    '$scope',function ($scope) {
        //这里先执行  1
        console.log('firstController');
        // console.log($scope);

    }
])